<template>
   <div class="index-yigui">
        <div class="container">
           <div class="title">
                <h1 class="ac-title">全房定制</h1>
                <router-link 
                tag="a" target="_blank"
                :to="{name:'productList', params: {style:'风格',name:'衣柜'}}"
                class="go">查看更多></router-link>    
           </div>
           <div class="body">
               <div class="body_left">
                   <img src="@/assets/index/index-quanwu-1.png" alt="">
                   <div class="tag">
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'风格',name:'衣柜'}}"
                       >衣柜</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'风格',name:'衣柜'}}"
                       >衣帽间</router-link>
                       <router-link
                       tag="a" target="_blank" 
                       :to="{name:'productList', params: {style:'风格',name:'衣柜'}}"
                       >客厅</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'风格',name:'衣柜'}}"
                       >餐厅</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'风格',name:'衣柜'}}"
                       >书房</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'风格',name:'衣柜'}}"
                       >榻榻米</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'风格',name:'衣柜'}}"
                       >儿童房</router-link>
                       <router-link 
                       tag="a" target="_blank"
                       :to="{name:'productList', params: {style:'风格',name:'衣柜'}}"
                       >浴室柜</router-link>
                   </div>
                   <router-link class="line" 
                   tag="a" target="_blank"
                   :to="{name:'productList', params: {style:'风格',name:'衣柜'}}"
                   >更多风格定制为您打造 ></router-link>
               </div>
               <div class="body_right">
                   <router-link 
                   tag="a" target="_blank"
                   :to="{name: 'productDetail', params: {id:this.big.id}}"  class="big1">
                        <img :src="this.bigurl" alt="">
                   </router-link>

                   <router-link 
                   class="litter"
                   tag="a" target="_blank"
                   :to="{name: 'productDetail', params: {id:item.id}}" 
                   v-for="item of this.litter" :key="item.id"
                   >
                        <img :src="item.main_img_url" alt="">
                        <p>{{item.second_title}}</p>
                   </router-link>
               </div>
           </div>
           
       </div>
      
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'IndexQuanwu',
  data () {
    return {
        msg: 'index',
        big:{},
        litter:[],
        categoryName:'衣柜',
        bigurl:''
     
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
   
      this.getInfo()
  },
  activated(){
      
  },
  methods: {
      getInfo(){
     
      axios.get(this.baseUrl+'product/to_index_product',
        {
            params:{
                       categoryName:this.categoryName
                    }
            
        }
               )
      .then(this.getInfoSucc)
    },
    getInfoSucc(response){
    //   console.log(response)
        this.big = response.data.big
        this.bigurl = this.big.indeximg.url
        this.litter = response.data.litter
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
.index-yigui
    margin-top 20px
img 
    width 100%
 a
    color black
.title  
    overflow hidden
.container
    container() 
.title>h1
    title()
.ac-title::after
    titleAfter()
.go
    go()
.body
    zhuanquBody()
    .body_left
        body_left()
.body_left>img
    body_left_img()
.tag
    tag()
.tag>a
    tag_a()
.tag>a:nth-child(odd)
    float left
.tag>a:nth-child(even)
    float right
.line
    tag_line()
.body_right
    body_right()
.body_right>a
    float left
.body_right>a+a+a
    margin-top 10px
.litter
    width 300px
    position relative
    margin-left 10px
.litter:nth-of-type(3) 
    margin-left 0
.litter>p
    position absolute
    bottom 0
    left 0
    width 100%
    background rgba(0,0,0,0.6)
    color white 
    height 40px
    line-height 40px
    text-align center
    font-size 16px
</style>
